<template>
  <div class="product" @click="gotoPage('Detail')">
    <div class="product-img">
      <img class="img" :src="props.pro.smallImg" alt="">
    </div>
    <div class="product-name">
      {{ props.pro.name }}
    </div>
    <div class="product-enname">
      {{ props.pro.enname }}
    </div>
    <div class="product-info">
      &yen; {{ props.pro.price }}
    </div>
    <div class="product-box" v-if="props.pro.isHot === 1">
      <van-tag mark color="#e4393c">热卖</van-tag>
    </div>
  </div>
</template>


<script setup lang="ts">
import { useRouter } from "vue-router"

import { defineProps } from 'vue'

let router: any = useRouter();

const props = defineProps({
  pro: {
    type: Object,
    default: ''
  }
})

function gotoPage(name: string): void {
  router.push({
    name,
    params: {
      pid: props.pro.pid
    }
  });
}


// const info =toRefs(props)
</script>

<style  lang="less" scoped>
.product {
  position: relative;
  border-radius: 8px;
  overflow: hidden;

  box-shadow: 0 0px 8px rgb(0 0 0 / 10%);

  .img {
    width: 100%;
  }

  .product-name {
    margin-top: 2px;
    font-size: 16px;
  }

  .product-enname {
    color: #999;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .product-info {
    margin-top: 5px;
    display: flex;
    align-items: center;
    color: #e4393c;
    font-weight: bold;
    font-size: 14px;
    margin-right: auto;
    margin-bottom: 8px;
  }

  .product-box {
    position: absolute;
    right: 0;
    top: 0;
  }
}
</style>